<template>
  <div class="pd30">

    <el-row :gutter="20" class=" ">
      <template v-for="(item,index) in performance">
        <el-col :lg="6" :md="6" :sm="12" :xs="12" class="mb5 ">
          <department title="" :info="item" :index="index"/>
        </el-col>
      </template>
    </el-row>


    <!--图表一-->
    <earningChart class="mt0" :view-value="TaoMpInfo"/>

    <!--图表二-->
    <singleChart :view-value="TaoMpInfo" :mp_type="0"/>

    <!--图标三-->
    <tencentChart :view-value="TaoMpInfo" :mp_type="0"/>

    <el-col :span="24" class="mv15">
      <v-table
        class="shadow"
        :table-title="tableTitle"
        :table-data="tableData"
        :default-operate="false"
      />
    </el-col>
  </div>
</template>

<script>
  import tencentChart from '../components/tencent_chart'
  import earningChart from './components/earning_chart'
  import singleChart from '../components/single_chart'
  import department from '../../../components/department_statistics'

  export default {
    components: {
      earningChart,
      tencentChart,
      singleChart,
      department
    },
    data() {
      return {
        performance: [],
        datas: null,
        TaoMpInfo:[
          {
            label: '全部',
            value: ''
          },
          {
            label: '微赞',
            value: '微赞'
          },
          {
            label: '乾丰',
            value: '乾丰'
          },
        ],
        tableTitle: [
          {
            cn: '主体名称',
            en: 'name'
          },
          {
            cn: '总成本',
            en: 'total_cost'
          },
          // {
          //   cn: '总流水',
          //   en: 'income'
          // },
          {
            cn: '总净收益',
            en: 'act_income'
          },
          // {
          //   cn: '总粉丝数',
          //   en: 'total_fans'
          // },
          {
            cn: '总回本周期',
            en: 'act_income'
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time'
          },
          // {
          //   cn: '7日日均回收',
          //   en: 'daily_income'
          // },
          // {
          //   cn: '单粉价格',
          //   en: 'per_fan_cost'
          // },
        ],
        tableData: []
      }
    },
    mounted() {
      this.getDatas()
      this.getFormValue()
    },
    methods: {
      // 获取员工列表
      getFormValue() {
        this.$get('action/TaoMpInfo/formValue')
          .then(res => {
            const TaoMpInfo = []
              res.data.TaoMpInfo.forEach(item => {
                TaoMpInfo.push({
                  label: item.mp_name,
                  value: item.mp_name,
                  status: item.launch_state
                })
              })
            this.TaoMpInfo = this.TaoMpInfo.concat(TaoMpInfo)
          })
          .catch(_ => console.log(1))
      },
      // 获取数据
      getDatas() {
        this.$get('action/TaoLaunchCorpInfo/dataForm')
          .then(res => {
            const data = res.data
            this.performance = data.arr_cycle_perf.map(item => {
              const obj = {}
              obj.title = item.name
              obj.lists = [
                {
                  title: '总消耗',
                  money: item.total_cost ? item.total_cost.toFixed(2) : '0'
                },
                {
                  title: '预估收益',
                  money: item.income ? item.income.toFixed(2) : '0'
                },
                {
                  title: '实际收益',
                  money: item['act_income'] ? item['act_income'].toFixed(2) : '0'
                },
                {
                  title: '拼多多收益',
                  money: item['pdd_earning'] ? item['pdd_earning'].toFixed(2) : '0'
                },
                {
                  title: '淘宝收益',
                  money: item['taobao_earning'] ? item['taobao_earning'].toFixed(2) : '0'
                },
                {
                  title: '总粉丝数',
                  money: item.name === '全部数据' ? (item['total_fans'] ? item['total_fans'] : '0') : ''
                },
                {
                  title: '净增粉丝数',
                  money: item.name !== '全部数据' ? (item['net_increase_fans'] ? item['net_increase_fans'] : '0') : ''
                }
              ]
              return obj
            })

            this.tableData = data.arr_corp_perf.map(item=>{
              item.per_fan_cost = item.per_fan_cost?item.per_fan_cost.toFixed(2):0
              item.per_fan_income = item.per_fan_income?item.per_fan_income.toFixed(2):0
              item.remaining_time = item.remaining_time?item.remaining_time.toFixed(2):0
              item.act_income = item.act_income?item.act_income.toFixed(2):0
              return item
            })
          })
          .catch(error => {
            console.log(error)
            // setTimeout(() => this.$router.go(-1), 1500)
          })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .document {
    font-size: 40px;
    margin-right: 5px
  }

  .shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 4px;
  }

  .pd30 {
    padding: 20px;
  }
.mb5{
  margin-bottom: 5px;
}
  .blue {
    background-color: #35AE98;
  }

  .red {
    background-color: #F05050;
  }

  .green {
    background-color: #27C24C;
  }

  .purple {
    background-color: #7266BA;
  }

  .small {
    font-size: 12px;
  }

  .flex-end {
    justify-content: flex-end;

  }

  .pdh10 {
    padding: 2px 10px;
  }

  .flex-auto {
    flex: 1;
  }

  .tar {
    text-align: right;
  }
  .mv15{
    margin: 15px 0 ;
  }
</style>
